﻿<html>
<head>
    <title>Using ViewBag</title>
</head>

<body style="background-color: #F2F7B9">
    <h3>Passing Multiple Models using <span class="specialText"><i>ViewBag</i></span></h3>
    <style>
        .checkclass {
            background-color:red;
        }
    </style>

    <table>

        <tr>
            <td class="sltAuteurTxt">
                <h3>Check the  Author</h3>
                <td>

                     
              @Html.DropDownList("auteur", (SelectList)ViewBag.auteur, "----Select One----", new { @class="myclass"})
                  
            </td>
        </tr>
    </table>


    <div id="ArticleDetailSection">

    </div>

   


  
      <input type="button" value="Article" />
       
    
    
     <script type="text/javascript">

         $(document).ready(function(){
             $("#ArticleDetailSection").fadeOut();
             var allarticle=@Html.Raw(Json.Encode(ViewBag.article));
             $(".myclass").change(function(){
                 var   selectedauthorname=$(".myclass").val().trim();
        
                 if   (selectedauthorname ==="----Select One----") {
                 }else{
                     var authorId=parseInt(selectedauthorname);
                     for (var i=0 ;i< allarticle.length; i++){
              
                         if (allarticle[i].AuthorId ===authorId){
                  
                             $("#ArticleDetailSection").html("<table style='border: 1px solid'> <tr> <td>   </td> <td> "+ allarticle[i].name+"</td> </tr></table>");

                         }
                   
                     }

                     //$("#ArticleDetailSection").fadeIn();
                 }
             });
            
                
           

         });
    </script>
             
               
            

            





    </body>
    </html>
